<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-table :data="skuList" border class="sku-table">
                <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
                <el-table-column label="SKU名称" width="200" align="center" prop="skuName"></el-table-column>
                <el-table-column label="描述" align="center" prop="skuDesc"></el-table-column>
                <el-table-column label="默认图片" width="320" align="center">
                    <template #default="scope">
                        <el-image :src="scope.row.skuDefaultImg" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="重量" width="100" align="center" prop="weight"></el-table-column>
                <el-table-column label="价格" width="100" align="center" prop="price"></el-table-column>
                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template #default="scope">
                        <el-button type="primary" size="default" :icon="scope.row.isSale == 1 ? 'Top' : 'Bottom'"
                            @click="onoroffsale(scope.row)"></el-button>
                        <el-button type="primary" size="default" @click="" icon="Edit"></el-button>
                        <el-button type="primary" size="default" @click="handleSkudetailInfo(scope.row)"
                            icon="InfoFilled"></el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="handleDeleteSku(scope.row)">
                            <template #reference>
                                <el-button type="primary" size="default" icon="Delete" color="red"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="PageNo" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
                :background="true" layout="  sizes,prev, pager, next, ->,jumper,total" :total="total" />
            <el-drawer v-model="drawer">
                <template #header>
                    <h4>SKU详情</h4>
                </template>
                <template #default>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">名称</el-col>
                        <el-col :span="22">{{ skuInfo?.skuName }}</el-col>
                    </el-row>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">描述</el-col>
                        <el-col :span="22">{{ skuInfo?.skuDesc }}</el-col>
                    </el-row>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">价格</el-col>
                        <el-col :span="18">{{ skuInfo?.price }}</el-col>
                    </el-row>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">重量</el-col>
                        <el-col :span="18">{{ skuInfo?.weight }}</el-col>
                    </el-row>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">平台属性</el-col>
                        <el-col :span="18">
                            <el-tag effect="dark" v-for="item in skuInfo?.skuAttrValueList" :key="item.attrId"
                                style="margin: 8px;">{{ item.valueName }}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row class="sku-info-row">
                        <el-col :span="8" class="sku-info-row-title">销售属性</el-col>
                        <el-col :span="18">
                            <el-tag effect="dark" v-for="item in skuInfo?.skuSaleAttrValueList" :key="item.saleAttrId"
                                style="margin: 8px;">{{ item.saleAttrValueName }}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="sku-info-row-title">图片</el-col>
                        <el-col>
                            <el-carousel height="200px" :interval=8000 motion-blur>
                                <el-carousel-item v-for="item in skuInfo?.skuImageList" :key="item.id">
                                    <el-image :src="item.imgUrl" fit="fill" :lazy="true"></el-image>
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>

                </template>
            </el-drawer>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { reqDeleteSku, reqSkuInfo, reqSkuList, reqSkuOffSale, reqSkuOnSale } from '@/api/product/sku/index'
import type { Skudata } from '@/api/product/sku/type';
import { ElMessage } from 'element-plus';
let PageNo = ref(1)
let pageSize = ref(5)
let total = ref(0)
let skuList = ref<Skudata[]>([])
let drawer = ref(false)
let skuInfo = ref<Skudata>()
const getSkuList = async () => {
    while (true) {
        try {
            const res = await reqSkuList(PageNo.value, pageSize.value);
            if (res.code == 200) {
                total.value = res.data.total;
                skuList.value = res.data.records;
                break;
            }
        } catch (error) {
            console.error('请求失败，正在重试...', error);
        }
    }
}
const onoroffsale = async (row: Skudata) => {
    while (true) {
        try {
            if (row.isSale == 1) {
                const res = await reqSkuOffSale(row.id)
                if (res.code == 200) {
                    getSkuList()
                    ElMessage.success('下架成功')
                    break;
                }
            } else {
                const res = await reqSkuOnSale(row.id)
                if (res.code == 200) {
                    getSkuList()
                    ElMessage.success('上架成功')
                    break;
                }
            }
        } catch (error) {
            console.error('请求失败，正在重试...', error);
        }
    }
}
const handleSkudetailInfo = async (row: Skudata) => {
    while (true) {
        try {
            const res = await reqSkuInfo(row.id)
            if (res.code == 200) {
                drawer.value = true
                skuInfo.value = res.data
                console.log(skuInfo.value)
                break;
            }
        } catch (error) {
            console.error('请求失败，正在重试...', error);
        }
    }
}
const handleDeleteSku = async (row: Skudata) => {
    while (true) {
        try {
            const res = await reqDeleteSku(row.id)
            if (res.code == 200) {
                getSkuList()
                ElMessage.success('删除成功')
                break;
            }
            else if(res.code == 201){
                ElMessage.error('删除失败，请稍后再试')
                break;
            }
        } catch (error) {
            console.error('请求失败，正在重试...', error);
        }
    }
}
onMounted(() => {
    getSkuList()
})
watch([PageNo, pageSize], () => {
    getSkuList()
})
</script>
<style lang="less">
.sku-table {
    margin-bottom: 20px;
}

.sku-info-row {
    margin-bottom: 25px;

    .sku-info-row-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
    }
}
</style>
